<script>
export default {
  name: 'FloatCard',
  props: ['bidBidding'],
  methods: {
    jumpTo(id) {
      this.$router.push(`/bid/detail?id=${id}`)
    }
  },
  data() {
    return {
      x: 0,
      y: 0,
      speedX: 2, // 控制浮动速度
      speedY: 2,
      interval: -1,

      contentLeft: 0,
      speedContentLeft: 1, // 控制文字移动速度

      stopState: false
    }
  },
  mounted() {
    const container = this.$refs.container;
    const content = this.$refs.content;

    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;

    const contentScrollWidth = content.scrollWidth; // 滚动宽度

    this.interval = setInterval(() => {
      if (this.stopState) return;

      const width = document.documentElement.offsetWidth;
      const height = document.documentElement.offsetHeight;

      // 控制容器的浮动
      container.style.top = this.y + 'px';
      container.style.left = this.x + 'px';
      this.y += this.speedY;
      this.x += this.speedX;

      if (this.y + containerHeight > height || this.y < 0) {
        this.speedY = -this.speedY;
      }
      if (this.x + containerWidth > width || this.x < 0) {
        this.speedX = -this.speedX;
      }

      // 控制文字的水平滚动
      content.style.left = -this.contentLeft + 'px';
      this.contentLeft += this.speedContentLeft;

      if (this.contentLeft >= contentScrollWidth / 2) {
        this.contentLeft = 0; // 重置到开头
      }
    }, 20);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
}
</script>

<template>
  <div ref="container" class="container"
       @mouseenter="stopState = true" @mouseleave="stopState = false">
    <div class="close-button" @click="$emit('close')">✕</div>
    <h2 class="title" @click="jumpTo(bidBidding.id)">
      <span ref="content" class="scroll-text">
        {{ bidBidding.bidTitle }} {{ "   ···   " }} {{ bidBidding.bidTitle }}
      </span>
    </h2>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: 70px;
  width: 300px;
  position: fixed;
  top: 20px;
  left: 20px;
  background: linear-gradient(45deg, #f39c12, #f1c40f);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.container:hover {
  transform: scale(1.05);
}

.close-button {
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  z-index: 1;
}

.title {
  white-space: nowrap;
  font-size: 20px;
  line-height: 70px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  margin: 0;
  padding-left: 10px;
}

.scroll-text {
  white-space: nowrap;
  position: absolute;
  animation: scroll 15s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
